import { Timer, UserFilled } from '@element-plus/icons-vue';
import { ElIcon } from 'element-plus';
import {defineComponent, onMounted, onUnmounted, PropType, ref} from 'vue';
import Style from './1080.module.scss';
import {useRouter} from "vue-router";
import router from "@/router";
import {useBreadcrumbStore} from "@/store/modules/breadcrumb";
import {MaskedName} from "@/utils/hooks";
import {useUserStore} from "@/store/modules/user";
import {useCardStore} from "@/store/modules/readCard";

export const UserInfo = defineComponent({
    props: {
        //倒计时时间
        time: {
            type: Number,
            default: 58
        },
        // 新增：倒计时结束回调（父组件可传入，实现自定义逻辑）
        onTimeout: {
            type: Function as PropType<() => Promise<void> | void>,
            default: undefined
        }
    },
    setup(props,) {

        const timeLeft = ref(props.time); // 倒计时时间
        const router = useRouter(); // 获取路由对象
        let countdownTimer: NodeJS.Timeout | null = null;
        const useTitle =useCardStore()


        const startCountdown = () => {
            countdownTimer = setInterval(async() => {
                if (timeLeft.value > 0) {
                    timeLeft.value--;
                } else {
                    clearInterval(countdownTimer!);
                    if (props.onTimeout) {
                        await props.onTimeout(); // 等待取消支付接口完成
                    }
                    router.push('/HomePage'); // 倒计时结束后跳转到HomePage页面
                }
            }, 1000);
        };

        onMounted(() => {
            startCountdown();
        });


        onUnmounted(() => {
            if (countdownTimer) {
                clearInterval(countdownTimer);
            }
        });

        const userStore = useUserStore(); // 获取用户信息
        const userName = ref(userStore.user?.PAT_NAME ?? '未知');





        return () => (<>
            <div class={Style.top}>
                <div class={Style.title}>
                    {useTitle.Usertitle}
                </div>

                <div class={Style.tips}>
                    <ElIcon>
                        <Timer></Timer>
                    </ElIcon>
                    <div class={Style.tips_text1}>
                        {timeLeft.value} 秒
                    </div>


                    <ElIcon>
                        <UserFilled></UserFilled>
                    </ElIcon>
                    <div class={Style.tips_text2}>
                        {userName.value}
                    </div>
                </div>
            </div>
        </>);
    }
})
